<template lang="html">
  <div id="charts">
    <div id="ai" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import {HttpResetClass } from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/BusinessType',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '用户类型'
        let arrparams = []
        let gasdata = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
          gasdata[i] = res.data[i].gas_value
        }
        self.set(arrparams,gasdata)
      })
  }
  export default {
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      title: '业务类型'
      return {
        texttile: '',
        xc: '',
        aparams: ['电量不足','电磁干扰','七天不用气','三天不上传','用气异常'],
        gdata:[0,0,123,45,0]
      }
    },
    methods: {
      set (arrparams,gasdata) {
        this.xc = echarts.init(document.getElementById('ai'))
        this.xc.setOption({
          title : {
            text: '异常信息',
            x: 'center'
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            x: 'left',
            y: 'bottom',
            data:arrparams
          },
          toolbox: {
            show : true,
            feature : {
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              data : arrparams
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [  {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:gasdata
          }
           ]
        })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      this.set(this.aparams,this.gdata)
      //this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    }

  }
</script>
